@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.markdown > * {
  all: revert;
}

.markdown p {
  margin: revert;
}

.markdown a {
  @apply text-blue-600 dark:text-blue-400 no-underline hover:underline;
}

.markdown ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.markdown ul ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.markdown ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

.markdown ol ol {
  list-style-type: lower-alpha;
  padding-left: 1.5rem;
}

/* Markdown styles */
.markdown pre {
  @apply bg-[#ebebeb] dark:bg-[#2d2d2d];
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  @apply text-light-text dark:text-dark-text;
}
.markdown code {
  @apply bg-[#ebebeb] dark:bg-[#2d2d2d];
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  @apply text-light-text dark:text-dark-text;
}

.markdown pre code {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* Light theme scrollbars */
.light ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.light ::-webkit-scrollbar-track {
  @apply bg-light-surface;
  border-radius: 4px;
}

.light ::-webkit-scrollbar-thumb {
  @apply bg-slate-400;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.light ::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-500;
}

.light ::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark theme scrollbars */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  @apply bg-dark-surface;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-slate-600;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.dark ::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-500;
}

.dark ::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox scrollbars */
.light * {
  scrollbar-width: thin;
  scrollbar-color: var(--light-scrollbar) var(--light-scrollbar-track);
}

.dark * {
  scrollbar-width: thin;
  scrollbar-color: var(--dark-scrollbar) var(--dark-scrollbar-track);
}

.light .modal-content,
.light [role="dialog"],
.light [role="complementary"],
.light .overflow-auto,
.light .overflow-y-auto,
.light .overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: var(--light-scrollbar) var(--light-scrollbar-track);
}

.dark .modal-content,
.dark [role="dialog"],
.dark [role="complementary"],
.dark .overflow-auto,
.dark .overflow-y-auto,
.dark .overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: var(--dark-scrollbar) var(--dark-scrollbar-track);
}

:root {
  --dark-scrollbar-track: rgb(30, 41, 59);  /* slate-800 */
}
